<template>
  <div class="paper">
    <div class="title">
      <p>发表论文</p>
    </div>
    <div class="content">
      <p style="text-decoration: underline rgb(68, 114, 196) 3px">
        第一完成单位论文：
      </p>
      <p v-for="(item, index) in first" :key="index">
        {{ index + 1 }}.{{ item.content }}
        <a :href="item.url" target="_blank">{{ item.link }}</a>
      </p>
      <p style="text-decoration: underline rgb(68, 114, 196) 3px">
        非第一完成单位论文：
      </p>
      <p v-for="(item, index) in nofirst" :key="index">
        {{ index + 1 }}.{{ item.content }}
        <a :href="item.url" target="_blank">{{ item.link }}</a>
      </p>
    </div>
  </div>
</template>

<script>
import { getPapperFirst, getPapperNoFirst } from "@/api/publicSearch";
export default {
  name: "paperView",
  data() {
    return {
      //第一单位发表
      first: [],
      //非第一单位发表
      nofirst: [],
      //第一单位发表链接名
      firstLink: [],
      //非第一单位发表链接名
      nofirstLink: [],
    };
  },
  mounted() {
    getPapperFirst().then((res) => {
      this.first = res.data.data;
      this.first.forEach((element) => {
        element.content = this.splitLink(element.content);
        element.link = this.replaceLink(element.url);
      });
    }),
      getPapperNoFirst().then((res) => {
        this.nofirst = res.data.data;
        this.nofirst.forEach((element) => {
          element.content = this.splitLink(element.content);
          element.link = this.replaceLink(element.url);
        });
      });
  },
  methods: {
    //在原始数据中分隔开链接名,取前面部分
    splitLink(str) {
      str = str.substring(0, str.indexOf("/"));
      return str;
    },
    //在原始数据中分隔开链接名,取后面部分
    replaceLink(str) {
      str = str.replace("https://iehpc.gdut.edu.cn", "");
      return str;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../css/character.scss";
@import "../css/common.scss";
.paper {
  width: 98%;
  .title {
    font-family: #{$about_page_font_family};
    font-size: #{$about_page_font_size}px;
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$first_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
    color: rgb(89, 89, 89);
    text-decoration: underline rgb(68, 114, 196) 3px;
  }
  .content {
    text-align: left;
    // 开头间隔
    text-indent: 20px;
    font-size: #{$second_font_size};
    font-weight: #{$second_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$second_titile_left}px;
    margin-bottom: #{$second_titile_bottom}px;
    line-height: #{$about_page_prg}px;
    // p{
    //     margin-bottom: 20px;
    // }
  }
  a:visited {
    color: rgba(0, 84, 190, 1);
  }
  a:link {
    color: rgba(0, 84, 190, 1); /* 修改未访问链接的颜色为蓝色 */
    text-decoration: none; /* 移除下划线 */
  }
}
</style>